<template>
    <div @click="getClickFocus()" @contextmenu.prevent class="outerDiv">
        <div class="topDiv">
            <div class="topDiv_text">
                <span style="color: #00CC66;">连续扫码投放</span>
                <span style="color: #CC00CC;">或</span>
                <span style="color: #FF0000;">扫绿海龟App二维码结算环保币</span>
            </div>

            <div>
                <input @keyup="inputChange" @keyup.enter="getCode" autocomplete="off" autofocus class="hiddenInput"
                       id="codeText"
                       maxlength="20"
                       ref="inputRef"
                       type="text"
                       v-model="watercode"
                       value="">
            </div>
        </div>
        <div class="midDiv">
            <div class="midDiv_right">
                <div style="height: 150px;">
                    <div class="choosediv" v-if="showChoose">
                        <choose :code="code"></choose>
                    </div>
                </div>

                <div class="listinfo">

                    <div class="listitem">
                        <div class="listsubitem1">
                            <div class="listsubitem_img">
                                <img src="../assets/image/suliao.jpg"/>
                            </div>
                        </div>
                        <div class="listsubitem">

                            <div class="listsubitem_title">塑料瓶：</div>
                            <div class="listsubitem_value">{{bottleItemIdList.length}} &nbsp;&nbsp;个</div>

                        </div>
                        <div class="listsubitem">
                            <div class="listsubitem_title">环保币：</div>
                            <div class="listsubitem_value">{{bottlescore}}</div>
                            <div class="bi_img"><img src="../assets/image/b.jpg"/></div>
                        </div>
                    </div>
                    <div class="listitem">
                        <div class="listsubitem1">
                            <div class="listsubitem_img">
                                <img src="../assets/image/yl.jpg"/>
                            </div>
                        </div>
                        <div class="listsubitem">
                            <span class="listsubitem_title">易拉罐：</span>
                            <span class="listsubitem_value">{{canItemIdList.length}}&nbsp;&nbsp;个</span>

                        </div>
                        <div class="listsubitem">
                            <div class="listsubitem_title"> 环保币：</div>
                            <div class="listsubitem_value">{{canscore}}</div>
                            <div class="bi_img"><img src="../assets/image/b.jpg"/></div>
                        </div>
                    </div>
                    <div class="listitem">
                        <div class="listsubitem1">
                            <div class="listsubitem_img">
                                <img src="../assets/image/qt.jpg"/>
                            </div>

                        </div>
                        <div class="listsubitem">
                            <span class="listsubitem_title">其他：</span>
                            <span class="listsubitem_value">{{otherItemIdList.length}}&nbsp;&nbsp;个</span>

                        </div>
                        <div class="listsubitem">
                            <div class="listsubitem_title"> 环保币：</div>
                            <div class="listsubitem_value">{{otherscore}}</div>
                            <div class="bi_img"><img src="../assets/image/b.jpg"/></div>
                        </div>
                    </div>
                    <div style="margin-top:80px;">
                        <div class="listitem21">
                            <div class="listitem_title">共计环保币：</div>
                            <div class="total_bi">{{score}}</div>
                            <div class="bi_img1"><img src="../assets/image/b.jpg"/>
                            </div>
                        </div>
                        <div class="listitem21" v-if="showGetScore">

                            <div class="listitem_title">扫码结币：</div>
                            <div class="total_bi">{{score}}</div>
                            <div class="bi_img1"><img src="../assets/image/b.jpg"/>
                            </div>
                        </div>
                    </div>

                </div>

            </div>

        </div>

        <div class="botDiv">
            <div class="botDiv_buttonline">

            </div>
            <div class="botDiv_bottom">

                <div class="botDiv_bottom_msg">{{msg}}</div>
                <div v-show="ifShowSecond">{{timeoutsecond}}</div>

            </div>

            <div class="botDiv_img">
                <div class="botDiv_img_1">
                    <img src="../assets/image/bt1.png">
                </div>
                <div class="botDiv_img_2">
                    <img src="../assets/image/qrcode.png"/>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
    import {
        initList,
        ifHasCode,
        openDoor,
        getHardwardStatue,
        closeDoor,
        getWeight,
        rightRotate,
        leftRotate,
        onLeft,//是否在左转状态
        onRight, //是否在右转状态

        backBottle,//退瓶操作
        onPlace, //瓶子是否到位
        saveTrade, //手机扫码，保存交易记录
        getUserInfo,//获取用户信息
        checkState, //检查设备状态
        SetMachineState, //上报错误

        // getItem,
        //getItemList,
        onRemove, getToken,//瓶子是否被取走
    }

        from './../api/api'
    import choose from "@/components/Choose";

    export default {
        name: "scan",
        components: {choose},
        data() { //注意：data即使不需要传数据，也必须return,否则会报错
            return {
                machineCode: this.$config.machineCode,//回收机编号
                maxCount: this.$config.maxCount,//投瓶最大的次数
                timer: '',
                codeList: [], //可计积分的瓶子
                score: 0,//可计积分值
                bottlescore: 0,//塑料瓶积分值
                canscore: 0,//易拉罐Id
                otherscore: 0,//其他类型

                recyclableItemIdList: [],//回收物Id
                bottleItemIdList: [],//塑料瓶Id
                canItemIdList: [],//易拉罐Id
                otherItemIdList: [],//其他瓶子

                waitCount: 10,//等待10次，如果还没有投瓶就返回
                ifCanScan: true,//是否允许扫码，如果当前正在运行状态，是不允许的，结束后才允许

                tenSecond: 10,
                errorSecond: 10 * 1000, //去检查设备运行状态
                code: '', //条码
                tel: '', //手机号码
                thirtySecond: 30,
                watercode: "",
                count: 10, //执行5次，还没有瓶子到位，就退出

                centerDialogVisible: false,//弹出的二维码对话框
                second: 60, //初始为60秒
                timeoutsecond: '', //消息框5秒后消失
                tensecondtimeout: 20,//等待20秒

                msg: '  ', //弹出消息框内容
                retentsecond: 30, //页面停留时间
                hasOperate: false,//是否有操作，如果没有操作就可以跳转，如果有操作就不跳转
                ifStopInterval: true,//是否停止计时器
                statueInterval: 1900, //读取硬件状态时间间隔
                formulaWeight: 0,//标准重量值
                bottleType: 1,//1：颜料瓶，2：易拉罐
                finished: 0,//过程是否结束
                scanned: 0,//是否扫码


                recyclableItemId: 0,//回收物Id
                price: 0,//币值
                userId: 0,//用户编号
                showChoose: false, //是否需要选择
                ifDisabled: true, //输入框不可用,输入无效
                errorTimer: '', //检查故障计时器

                waitSecond: 60 * 1000,//等待时长
                ifShowSecond: true,// 是否显示计时器
                weight: 0,//当前重量值
                weightFlag: 0,//是否已经称重，为了防止连续两次称重
                leftingCount: 0,//如果一直处于判断左转状态，超出10次就自动判断是否右转状态
                showGetScore: false,//是否结算

                weightRate: this.$config.weightRate,//重量倍率

                provinceCode: this.$config.provinceCode, //省编号
                cityCode: this.$config.cityCode,//市编号
                areaCode: this.$config.areaCode,//区编号
                operatorId: this.$config.operatorId,//运营商编号

                title: this.$config.title,
                thankmsg: this.$config.thankmsg,
                backmsg: this.$config.backmsg,
                removemsg: this.$config.removemsg,
                finishmsg: this.$config.finishmsg,
                finishmsg1: this.$config.finishmsg1,
                outweightmsg: this.$config.outweightmsg,
                toremovemsg: this.$config.toremovemsg,
                errorcodemsg: this.$config.errorcodemsg,
                successmsg: this.$config.successmsg,
                failmsg: this.$config.failmsg,
                openmsg: this.$config.openmsg,
                errormsg1: this.$config.errormsg1,
                errormsg2: this.$config.errormsg2,
                onplacemsg: this.$config.onplacemsg,
                weightmsg: this.$config.weightmsg,
                finishweightmsg: this.$config.finishweightmsg,
                unknownmsg: this.$config.unknownmsg,
                uncountmsg1: this.$config.uncountmsg1,
                uncountmsg2: this.$config.uncountmsg2,
                pausemsg: this.$config.pausemsg,
                waitmsg: this.$config.waitmsg,
                outcountmsg1: this.$config.outcountmsg1,
                outcountmsg2: this.$config.outcountmsg2,
                instoremsg: this.$config.instoremsg,
            }
        },

        watch: {
            msg(val) {
                var that = this;
                if (that.waitTimer) {
                    clearTimeout(that.waitTimer);
                }
                that.waitTimer = setTimeout(that.reback, that.waitSecond);
            }
        },

        created() {
            //getToken(this.$config.remote_url,this.$config.username,this.$config.password);
            getToken(this.$config.remote_url, this.$config.username, this.$config.password).then(
                (res) => {
                    if (res == 1) {
                        alert(this.$config.neterrormsg);
                    }
                }
            );

            initList().then(() => {
                // console.log("开始初始化====");
            }).catch((err) => {
                console.log(err);
            });
        },


        mounted() {
            this.retention();
            this.getFocus();
            clearTimeout(this.timer);
            this.msg = this.waitmsg;
            this.codeList = [];
            this.recyclableItemIdList = [];
            this.bottleItemIdList = [];
            this.canItemIdList = [];
            this.otherItemIdList = [];

            this.score = 0;
            this.bottlescore = 0;
            this.canscore = 0;
            this.otherscore = 0;

            //0222添加的bus=========
            console.log("===开始接收数据")
            this.$EventBus.$on('updatemsg', val => {
                var finished = val.finished;
                this.showChoose = false;
                if (finished == 1) {
                    if (this.recyclableItemIdList.length > 0) {
                        this.msg = val.msg + this.uncountmsg1;
                    } else {
                        this.msg = val.msg + this.uncountmsg2;
                    }
                    if (val.score == 1) {
                        this.otherItemIdList.push(this.code);
                    }

                    this.getFocus();
                } else {
                    this.msg = val.msg;
                }
            });
            //0222添加的bus=========

        },
        methods: {
            getError() {
                this.errorTimer = setTimeout(this.onGetError, this.errorSecond);
            },
            onGetError() {
                var that = this;
                checkState().then((res) => {
                    if (res.other != 0) {
                        that.msg = that.pausemsg;
                        console.log("*****设备故障*****");
                        clearTimeout(that.errorTimer);
                        SetMachineState(this.$config.remote_url, this.machineCode, res.other).then((res) => {
                            console.log(res);
                            that.reback();
                        });
                    }
                });

                that.getError();
            },

            //返回
            reback() {
                var that = this;
                if (that.timer) {
                    clearTimeout(that.timer);
                }
                if (that.waitTimer) {
                    clearTimeout(that.waitTimer);
                }

                if (that.waitScan_timer) {
                    clearTimeout(that.waitScan_timer);
                }
                console.log("******跳转1*****");
                that.codeList = [];
                that.recyclableItemIdList = [];
                this.bottleItemIdList = [];
                this.canItemIdList = [];
                this.otherItemIdList = [];

                this.score = 0;
                this.bottlescore = 0;
                this.canscore = 0;
                this.otherscore = 0;

                that.$router.push("/advert");  //页面跳转到广告页
            },


            //获取页面焦点
            getFocus() {
                if (document.getElementById("codeText")) {
                    document.getElementById("codeText").readOnly = false;
                    document.getElementById("codeText").focus();
                }


            },

            getClickFocus() {
                //this.$refs['inputRef'].focus();
                document.getElementById("codeText").focus();
            },

            //失去页面焦点
            lostFocus() {
                if (document.getElementById("codeText")) {
                    document.getElementById("codeText").readOnly = true;
                    document.getElementById("codeText").blur();
                }
                //this.$refs['inputRef'].blur();
            },

            //等待手机扫码
            waitScan() {
                if (this.finished == 1 && this.scanned == 0) {
                    if (this.waitScan_timer) {
                        clearTimeout(this.waitScan_timer);
                    }
                    this.waitScan_timer = setTimeout(this.onWaitScan, 1000);
                }
            },
            onWaitScan() {
                var that = this;
                that.timeoutsecond = this.timeoutsecond - 1;
                console.log("时间" + that.timeoutsecond);
                //如果是最后5秒，就不让再扫码了
                if (that.timeoutsecond <= 5) {
                    that.lostFocus();
                }
                if (that.timeoutsecond <= 0) {
                    that.msg = that.thankmsg;
                    that.timeoutsecond = "";

                    setTimeout(function () {
                        that.reback();
                    }, 3000);

                } else {
                    that.waitScan();
                }

            },


            showFinish() {
                this.timer = setTimeout(this.finishDialog, 1000);
            },
            finishDialog() {

                this.timeoutsecond = this.timeoutsecond - 1;
                this.showGetScore = true;
                console.log(this.timeoutsecond)
                if (this.timeoutsecond <= 0) {
                    console.log("****finishDialog***");
                    this.reback();

                } else {
                    this.showFinish();
                }

            },


            showClose() {
                if (this.timer) {
                    clearTimeout(this.timer);
                }
                this.timer = setTimeout(this.closeDialog, 1000);
            },
            closeDialog() {
                var that = this;

                if (that.tensecondtimeout > 0) {
                    that.tensecondtimeout = that.tensecondtimeout - 1;
                    that.timeoutsecond = that.tensecondtimeout;
                    console.log(that.tensecondtimeout)
                    //let _weight = 0;
                    let _remove = 0;
                    if (that.tensecondtimeout % 3 == 0) //每2秒去判断是否被取走
                    {
                        onRemove().then((res) => {
                            _remove = res.other;
                            console.log("看看是否被取走:===" + res.other);
                            if (res.other == 1) {
                                clearTimeout(that.timer);
                                that.msg = that.removemsg;
                                that.getFocus();
                                that.tensecondtimeout = 0;
                                that.timeoutsecond = "";

                                return;
                            }
                        });


                    }

                    that.showClose();
                } else {

                    that.getFocus();
                    if (that.timer) {
                        clearTimeout(that.timer);
                    }

                    rightRotate().then(() => {
                        setTimeout(function () {
                            onRight().then(() => {
                                if (that.timer) {
                                    clearTimeout(that.timer);
                                }
                            });
                        }, 500);
                        that.msg = that.finishmsg;

                    }); // 发送关门命令

                    that.timeoutsecond = "";
                }

            },
            //页面停留时间长后，自动跳转到首页
            backToHome() {
                //如果页面正在被操作，就不执行以下语句
                if (this.hasOperate) {
                    return;
                } else {
                    //如果页面没有操作，就会等待1分钟，跳转回到首页
                    this.retentsecond = this.retentsecond - 1;

                    if (this.retentsecond <= 0) {
                        this.reback();
                    } else {
                        this.retention()
                    }
                }

            },
            //本页面停留时间，如果超过一分钟，自动跳转到首页
            retention() {
                this.timer = setTimeout(this.backToHome, 1000);
            },
            //5秒后跳回首页
            popmsg() {
                this.timer = setTimeout(this.jumpToHome, 1000);
            },
            //返回首页
            jumpToHome() {
                this.timeoutsecond = this.timeoutsecond - 1;
                if (this.timeoutsecond <= 0) {
                    this.reback();
                } else {
                    this.popmsg()
                }

            },

            getStatue() {

                var formula = this.formulaWeight;
                var type = this.bottleType;

                getHardwardStatue().then((res) => {
                    console.log("当前状态===========");


                    if (res.other == "open" & !this.ifStopInterval) { //如果是开门状态
                        this.msg = this.openmsg;
                        this.ifShowSecond = false;
                        if (this.count % 2 == 0) //倒数第三秒，去读当前是否就位
                        {
                            setTimeout(function () {
                                onPlace();
                            }, 210);
                        }
                        // console.log("this.count ： " + this.count);
                        this.count--;
                        // console.log("未就位倒计时 ： " + this.count);
                        if (this.count <= 0 && !this.ifStopInterval)//如果5次后，还没有就位，那就退出
                        {
                            this.ifStopInterval = true; //停止循环
                            // console.log("只好退出了");
                            // clearTimeout(_close_timeout);
                            var _that = this;
                            setTimeout(function () {
                                closeDoor().then(() => {
                                    _that.getFocus();
                                    //后加的，为了关门后执行一次翻转
                                    setTimeout(function () {
                                        rightRotate();
                                    }, 320);
                                    //后加的，为了关门后执行一次翻转
                                });
                            }, 210);
                            //


                            //console.log("关门操作");
                            if (this.recyclableItemIdList.length > 0) {
                                this.msg = this.errormsg1;
                            } else {
                                this.msg = this.errormsg2;
                            }
                            this.getFocus();
                        }
                    } else if (res.other == "onPlace" && !this.ifStopInterval) { //就位状态

                        this.msg = this.onplacemsg;
                        this.timeoutsecond = "";
                        console.log("就位，关门==");
                        //执行关门
                        setTimeout(function () {
                            closeDoor().then();
                        }, 310);
                    } else if (res.other == "close" && this.weight == 0 && this.weightFlag == 0 && !this.ifStopInterval) {
                        this.msg = this.weightmsg;
                        var that = this;
                        that.weightFlag = 1;  //将标志位置1，防止连续两次执行
                        //执行称重
                        setTimeout(function () {
                            getWeight().then((res) => {
                                that.weight = res.other;
                                console.log("称重结果:" + res.other);
                            });
                        }, 310);
                    } else if (res.other == "weight" && !this.ifStopInterval) {
                        this.weightFlag = 0;
                        this.msg = this.finishweightmsg;

                        console.log("称重结果==");
                        if (this.weight > formula * this.weightRate) {
                            this.msg = this.outweightmsg;
                            console.log("大于标准值 ，说明超重" + this.weight);
                            this.weight = 0;
                            setTimeout(function () {
                                backBottle();//退瓶操作
                            }, 220);
                            //半分钟没取走，发出关门指令
                        } else {
                            console.log("小于标准值 ，未超重" + this.weight);
                            this.msg = this.instoremsg;
                            if (this.bottleType.indexOf("塑料") != -1) //塑料瓶左转
                            {
                                // that.msg="左转";
                                console.log("左转========");
                                setTimeout(function () {
                                    leftRotate();
                                }, 220);

                            } else {//右转
                                // that.msg="右转";
                                console.log("右转========");
                                setTimeout(function () {
                                    rightRotate();
                                }, 220);
                            }
                        }

                    } else if (res.other == "lefting") {
                        this.weight = 0; //将重量置0
                        this.leftingCount++;
                        console.log("**获取左转状态次数:" + this.leftingCount);
                        if (this.leftingCount >= 5) {
                            setTimeout(function () {
                                onRight();
                            }, 230);
                        } else {
                            setTimeout(function () {
                                onLeft();
                            }, 230);
                        }

                    } else if (res.other == "righting") {
                        this.weight = 0;
                        console.log("**获取右转状态");
                        setTimeout(function () {
                            onRight();
                        }, 230);

                    } else if ((res.other == "left" || res.other == "right") && !this.ifStopInterval) {
                        this.weight = 0;//初始化weight 的值
                        this.leftingCount = 0; //初始化判断是否在左侧状态的次数
                        this.ifStopInterval = true; //停止循环
                        console.log("显示扫码信息！");
                        //2021-01-31 这一行可去掉
                        console.log("这里开始计分===========");
                        this.codeList.push(this.code);
                        this.recyclableItemIdList.push(this.recyclableItemId);
                        this.score = this.score + this.price;
                        if (this.bottleType.indexOf("塑料") != -1) {
                            this.bottleItemIdList.push(this.recyclableItemId);
                            this.bottlescore = this.bottlescore + this.price;
                        } else {
                            this.canItemIdList.push(this.recyclableItemId);
                            this.canscore = this.canscore + this.price;
                        }


                        this.msg = this.finishmsg1;
                        this.ifShowSecond = true;
                        this.timeoutsecond = this.thirtySecond;
                        this.tel = "",
                            this.ifStopInterval = true; //停止循环
                        this.finished = 1;
                        this.watercode = "";
                        var _this = this;

                        //这个地方很有用，2月23日下午，左老师说，不用再延时了，
                        setTimeout(function () {
                            _this.getFocus();

                        }, 100);

                        console.log("等待手机扫码==========");
                        if (this.timer) {
                            clearTimeout(this.time);
                        }
                        this.waitScan();//等待手机扫码

                    } else if (res.other == "back") {
                        this.msg = this.toremovemsg;
                        console.log("瓶子被退回");
                        this.ifStopInterval = true; //停止循环
                        clearTimeout(this.timer);
                        this.tensecondtimeout = 30;
                        this.ifShowSecond = true;
                        this.watercode = "";
                        this.showClose();

                    }

                });
                if (!this.ifStopInterval) {
                    // console.log("ifStopInterval-------");
                    this.readHardwarStatue();
                }
            },
            //读取硬件状态
            readHardwarStatue() {
                //console.log("readHardwarStatue-------getStatue");
                this.timer = setTimeout(this.getStatue, this.statueInterval);
            },


            //获取瓶子的编码
            getCode() {
                var that = this;
                //=====
                that.count = that.waitCount;
                if (!that.ifCanScan) //如果不允许扫码
                {
                    that.watercode = "";
                    return;
                }
                if (that.watercode == "") {
                    return;
                }

                //=2021-01-18 15：16：48连续不间断扫码导致出错，加如下操作，只为屏蔽连续扫码=====
                var t;
                that.ifCanScan = false;
                clearTimeout(t)
                t = setTimeout(function () {
                    // console.log('执行了');
                    that.ifCanScan = true;
                }, 1000);
                //=2021-01-18 15：16：48连续不间断扫码导致出错，加如下操作，只为屏蔽连续扫码=====

                if (that.watercode.length != 11 && that.watercode.length != 13 && that.watercode.length != 0) {
                    that.msg = that.errorcodemsg;
                    that.watercode = "";
                    return;
                }

                if (that.watercode.length == 11 && that.watercode.substr(0, 1) == "1") //如果是手机号
                {
                    that.tel = that.watercode;
                    that.watercode = "";
                    console.log(that.codeList);
                    if (that.finished == 1) {
                        that.lostFocus();
                        that.scanned = 1;
                        getUserInfo(that.$config.remote_url, that.tel).then((res) => {
                            if(res==1)
                            {
                                alert(this.$config.neterrormsg);
                                return;
                            }
                            console.log("用户信息======" + res.userInfo.id);
                            let _tel = res.userInfo.tel;
                            let _userId = res.userInfo.id;
                            console.log("=====" + _userId + "====")
                            //将结果上传至服务器
                            var that = this;
                            that.recyclableItemIdList.forEach((item, index) => {
                                saveTrade(that.$config.remote_url, item, _userId, _tel, that.machineCode, that.operatorId, that.price, that.provinceCode, that.cityCode, that.areaCode).then((res) => {
                                    if (index == that.codeList.length - 1) {
                                        if (res.status == 200) {
                                            this.msg = this.successmsg;
                                        } else {
                                            this.msg = this.failmsg;
                                        }
                                        that.timeoutsecond = that.tenSecond;
                                        that.showFinish();
                                    }

                                });
                            });

                        });





                    }
                    console.log("手机号码:" + that.tel);

                } else { //如果是条码数字
                    //判断数据库里是否有此码
                    //如果结束了，不允许再投瓶了
                    //==如果超过了30个，就不能再扫了
                    if (that.recyclableItemIdList.length >= that.maxCount) {
                        that.msg = that.outcountmsg1 + that.maxCount + that.outcountmsg2;
                        that.watercode = "";
                        return;
                    }

                    //-----------------
                    that.hasOperate = true;
                    that.code = that.watercode;
                    that.count = 10;
                    that.watercode = "";
                    console.log("=====开始====");
                    that.lostFocus();
                    //17:27 加这一句，因为第二次投递，这个定时器没有停止
                    if (that.waitScan_timer) {
                        clearTimeout(that.waitScan_timer);
                    }

                    ifHasCode(that.$config.remote_url, that.code.trim()).then((res) => {
                        if(res==1)
                        {
                            alert(this.$config.neterrormsg);
                            return;
                        }
                        if (res.dataCount > 0)//如果找到了瓶子信息，开门，投瓶
                        {
                            console.log("瓶子信息=============");
                            that.recyclableItemId = res.data[0].id;
                            that.bottleType = res.data[0].type;
                            that.formulaWeight = res.data[0].weight;
                            that.price = res.data[0].price
                            setTimeout(function () {

                                openDoor().then((res) => {
                                    that.msg = that.$config.openmsg;
                                    that.ifShowSecond = false;
                                    console.log("开门" + res.code);
                                    if (res.code == 200) {
                                        that.ifStopInterval = false;
                                        that.count = that.waitCount;
                                        setTimeout(function () {
                                            that.getStatue();//读取设备状态
                                        }, 1000);


                                    } else {
                                        console.log("开门失败");
                                        that.getFocus();
                                    }
                                });
                            }, 200);

                        } else { //如果没有找到条码的记录，
                            setTimeout(function () {
                                that.msg = that.unknownmsg;
                                that.ifShowSecond = false;
                                that.showChoose = true;
                                that.lostFocus();
                            }, 500);

                        }
                    });
                }

            },


            inputChange() {
                this.watercode = this.watercode.replace(/[^\d]/g, '').trim();
            },
        },
    }
</script>

<style scoped>
    .hiddenInput {
        opacity: 0;
    }

    .outerDiv {
        width: 100%;
        height: 100%;
        margin: 0 auto;
        text-align: left;
        background-color: #F1FFF0;

    }

    .topDiv {
        line-height: 250px;
        height: 150px;
        text-align: center;

    }

    .midDiv {
        height: 1100px;
    }

    .botDiv {

        width: 100%;

        height: 550px;

    }

    .botDiv_bottom {
        height: 180px;
        text-align: center;
        font-size: 35px;
        color: #ff6600;
        line-height: 150%;
        font-weight: bold;
        margin-left: 100px;
        margin-right: 300px;
    }


    .botDiv_buttonline {
        height: 140px;
        line-height: 80px;
        text-align: center;
        visibility: hidden;
    }

    .botDiv_bottom_codeIDList {
        visibility: hidden;
    }

    .botDiv_button {
        width: 180px;
        height: 50px;
        border-radius: 10px;
        border: 2px solid #d9d9d9;
        background-color: #fff;
        line-height: 50px;
        margin: 0 auto;
        font-size: 18px;
    }

    .botDiv_left {
        width: 800px;

        overflow: hidden;
        text-align: left;
        margin-top: 40px;

    }

    .botDiv_right {
        flex: 1;
        text-align: center;
        margin-top: 280px;
    }

    .midDiv_left {
        flex: 3;
        overflow: hidden;
        margin-left: 10px;

    }

    .midDiv_right {
        flex: 2;
    }


    .midDiv_left_itemImg img {
        width: 420px;
        margin-top: 30px;
        margin-bottom: 50px;
    }

    .midDiv_left_itemTitle img {
        width: 50px;
        height: 50px;
    }

    .midDiv_left_itemTitle_text {
        margin-left: 20px;
        line-height: 60px;
    }

    .midDiv_left_spaceLine {
        line-height: 40px;
        height: 40px;
    }

    .topDiv_text {
        font-size: 40px;
        color: #2F8B5F;
        height: 100px;
    }

    .scoreText1 {
        font-size: 28px;
    }

    .scoreText2 {
        font-size: 28px;
    }

    .listitem {
        display: flex;
        border: 5px dashed #00BB00;
        border-radius: 50px;
        background-color: #fff;
        margin-top: 80px;
        padding: 30px;
        padding-right: 50px;
    }

    .listsubitem1 {
        flex: 2;
        height: 130px;
        line-height: 130px;
        font-size: 35px;
        display: flex;
    }

    .listsubitem {
        flex: 3;
        height: 130px;
        line-height: 130px;
        font-size: 35px;
        display: flex;
    }

    .listsubitem_img {
        flex: 1;
        text-align: center;
        margin-left: 0px;
    }

    .bi_img {
        width: 100px;
        padding-top: 10px;
        text-align: center;
    }


    .bi_img1 {
        width: 100px;
        padding-top: 0px;
        text-align: center;
    }

    .listsubitem img {
        vertical-align: center;
        margin-left: 20px;
    }

    .listitem22 {
        width: 600px;
        line-height: 200%;
        font-size: 40px;
        margin: 0 auto;
        color: #00cc66;
        font-weight: bold;
        display: flex;
    }

    .listitem21 {
        width: 600px;
        line-height: 50px;
        height: 60px;
        font-size: 40px;
        margin: 0 auto;
        color: #00cc66;
        font-weight: bold;
        display: flex;

    }

    .listinfo {
        width: 1000px;
        margin: 0 auto;
    }

    .msgtitle {

        text-align: center;
        margin: 0 auto;
        line-height: 150%;
        font-size: 30px;
    }

    .choosediv {
        width: 1000px;
        margin: 0 auto;
    }

    .listsubitem_title {
        color: #00CC66;
        flex: 3;
    }

    .listsubitem_value {

        overflow: hidden;
        color: #ff6600;
        flex: 2;
    }

    .botDiv_img {
        display: flex;
    }

    .botDiv_bottom_msg {
        line-height: 150%;
        text-align: center;
    }

    .botDiv_img_2 {
        flex: 1;
        text-align: center;
        margin-top: 150px;
    }

    .botDiv_img_1 {
        flex: 2;
        text-align: center;
    }

    .total_bi {
        width: 200px;
        color: #FF6600;
        margin-left: 100px;
        margin-right: 50px;
    }

    .total_score {
        color: #FF6600;
        margin-left: 100px;
        margin-right: 50px;
    }

    .listitem_title {
        width: 450px;
    }
</style>